<!-- 新增集体复审 --> 
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="1200px"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <!-- <el-form ref="form" :model="formData" :rules="rules" label-width="150px"> -->
    <el-form ref="form" :model="formData" label-width="150px">
      <div class="section-title">单位信息</div>
      <div class="section-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="单位名称" prop="unitName">
                <el-input
                  v-model="formData.unitName"
                  placeholder="请输入单位名称"
                /> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="单位统一信用代码" prop="creditCode">
                <el-input
                  v-model="formData.creditCode"
                  placeholder="请输入单位统一信用代码"
                /> </el-form-item
            ></el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="所属区域" prop="administrativeArea">
                <el-select
                  v-model="formData.administrativeArea"
                  style="width: 100%"
                  placeholder="请选择所属区域"
                >
                  <el-option
                    v-for="item in administrativeAreaOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="所在单位性质" prop="unitNature">
                <el-select
                  v-model="formData.unitNature"
                  style="width: 100%"
                  placeholder="请选择单位性质"
                >
                  <el-option
                    v-for="item in unitNatureOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select> </el-form-item
            ></el-col>
          </el-col>
          <el-col :span="24">
            <el-form-item label="单位地址" prop="address">
              <el-input
                v-model="formData.address"
                placeholder="请输入发证机关地址"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="联系人姓名" prop="contactName">
                <el-input
                  v-model="formData.contactName"
                  placeholder="请输入联系人姓名"
                /> </el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="手机号码" prop="phoneNumber">
                <el-input
                  v-model="formData.phoneNumber"
                  placeholder="请输入手机号码"
                /> </el-form-item
            ></el-col>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDicts } from "@/api/system/dict/data";
export default {
  name: "AddGroupReexamination",
   props: {
    dictData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        unitName: "",
        creditCode: "",
        region: "",
        unitNature: "",
        address: "",
        contactName: "",
        phoneNumber: "",
      },
      //   rules: {
      //     unitName: [
      //       { required: true, message: "请输入单位名称", trigger: "blur" },
      //     ],
      //     creditCode: [
      //       {
      //         required: true,
      //         message: "请输入单位统一信用代码",
      //         trigger: "blur",
      //       },
      //     ],
      //     region: [
      //       { required: true, message: "请选择所属区域", trigger: "change" },
      //     ],
      //     unitNature: [
      //       { required: true, message: "请选择所在单位性质", trigger: "change" },
      //     ],
      //     address: [
      //       { required: true, message: "请输入单位地址", trigger: "blur" },
      //     ],
      //     contactName: [
      //       { required: true, message: "请输入联系人姓名", trigger: "blur" },
      //     ],
      //     phoneNumber: [
      //       { required: true, message: "请输入手机号码", trigger: "blur" },
      //     ],
      //   },
      dialogTitle: "新增集体复审",
      administrativeAreaOptions: [], // 所属区域选项
      unitNatureOptions: [], // 单位性质选项
    };
  },
  created() {
    // this.initDictData();
  },
  watch: {
    dictData: {
      handler(newVal) {
        if (newVal !== null) {
          this.initDictData();
        }
      },
      deep: true,
    },
  },
  methods: {
    initDictData() {
      this.unitNatureOptions = this.dictData.unitNatureOptions;
      this.administrativeAreaOptions = this.dictData.administrativeAreaOptions;
    },

    open() {
      this.dialogVisible = true;
      this.resetForm();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCancel() {
      this.dialogVisible = false;
      this.resetForm();
    },
    handleNext() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 将单位信息传递给 GroupPersonList
          this.$emit("next", this.formData);
          this.dialogVisible = false;
        } else {
          this.$message.error("请填写完整信息");
        }
      });
    },
    resetForm() {
      // 添加安全检查，确保 $refs.form 存在再调用 resetFields
      if (
        this.$refs.form &&
        typeof this.$refs.form.resetFields === "function"
      ) {
        this.$refs.form.resetFields();
      }
    },
  },
};
</script>

<style scoped>
/* 标题样式 */
.section-title {
  font-weight: bold;
  font-size: 20px;
  padding: 10px 0;
  margin-bottom: 10px;
}
/* 区块内容容器 */
.section-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  border: 1px solid #ddd;
  padding: 16px;
  background-color: #fff;
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>


